import React, { memo, useEffect, useState } from 'react'
import * as api from '../../api'
// import { useHistory } from 'react-router-dom'
import Scroll from '../../baseUI/scroll'
import { Container } from './MainStyle.js'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
// import _ from 'lodash'   // 节流

import SearchInput from '../../components/searchInput/SearchInput'
import RotationChart from '../../components/main/rotationChart/RotationChart'
import MenuBar from '../../components/main/menuBar/MenuBar'
import MiHome from '../../components/main/miHome/MiHome'
import Recommend from '../../components/main/recommend/Recommend'
import SecondaryMenu from '../../components/main/scondaryMenu/SecondaryMenu'
import Commodity from '../../components/main/commodity/Commodity'
import SecondaryContent from '../../components/main/secondaryContent/SecondaryContent'


import { forceCheck } from 'react-lazyload'  // react-lazyload 图片延迟加载

import backgroundPicture from '../../assets/mainIconfont/背景图.png'
import labelPicture from '../../assets/mainIconfont/标签.png'




const Main = (props) => {
	// 状态
	const [list, setList] = useState([])
	const [detailList, setDetailList] = useState([])
	let [page, setPage] = useState(1)
	// const { maindata } = props
	const [display, setDisplay] = useState(false)


	const fetchContect = () => {
		api
			.reqContext(page)		
			.then(res => {
				setList([
					...list,
					...res.data.data.list
				])
			})
	}
	// const throttled = _.throttle(fetchContect,5000)

	const fetchDetail = () => {
		api.reqDetail()
			.then((res) => {
				setDetailList(res.data.data.detailList)
			})
	}

	useEffect(() => {
		// if (!maindata.length) {
		// 	getMainDataDispatch()
		// }
		fetchContect()
		fetchDetail()
	}, [])

	useEffect(() => {
		fetchContect()
		// throttled()	
	}, [page])

	//  上拉加载更多
	const handlePullUp = () => {
		setPage(++page)
	}

	// // 下拉刷新
	// const handlePullDown = () => {
			
	// }

	const onScroll = () => {
		// console.log('scroll, -------------------')
	}
	return (
		<Container>
			<SearchInput
				handleOnclick={() => { handleOnclick() }}
				display={display}
			// searchBoxHandleOnclick={() => history.push('/search')}
			// style={display? {backgroundColor:'#fff'} : {backgroundColor:'#000'}}  
			/>

			<Scroll
				direction={"vertical"}
				bounceTop={false}
				onScroll={
					(e) => {
						forceCheck()  // 图片懒加载
						// console.log(e.y)

						if (e.y < -1) {
							setDisplay(true)
							// console.log(display,'///////////////');
						} else {
							setDisplay(false)
						}
					}
				}
			pullUp={handlePullUp}
			// pullDown={handlePullDown}
			>
				<div className='main'>  {/* 把scroll的底部撑起来 */}
					<div className="picture">
						<img src={backgroundPicture} alt="" />
					</div>
					<RotationChart />
					<div className='label'><img src={labelPicture} alt="" /></div>
					<MenuBar />
					<MiHome />
					<Recommend />
					<SecondaryMenu />
					<Commodity detailList={detailList}/>
					<SecondaryContent list={list} />
					{/* <Recommend />
						<Recommend /> */}
				</div>
			</Scroll>

		</Container>
	)
}
const mapStateToPorps = (state) => {
	return {

	}
}
const mapStateToDispatch = (dispatch) => {
	return {

	}
}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(Main))
